// router.js
/* jshint esversion: 6 */
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/store'
import otherRoute from './other'

Vue.use(Router)

// 静态路由
let defaultRouter = [{
  path: '/',
  redirect: 'login'
}, {
  path: '/my',
  redirect: 'login'
}, {
  path: '/login',
  name: 'login',
  component: () =>
    import ('@/pages/login'),
  meta: {
    title: 'login'
  }
}, {
  path: '/index',
  name: 'index',
  component: () =>
    import ('@/views/A_index'),
  meta: {
    title: 'index'
  }
}, {
  path: '/tableWidth',
  name: 'tableWidth',
  component: () =>
    import ('@/views/表格自适应宽度'),
  meta: {
    title: 'tableWidth'
  }
}, {
  path: '/formWidth2',
  name: 'formWidth2',
  component: () =>
    import ('@/views/表单宽度'),
  meta: {
    title: 'formWidth2'
  }
}, {
  path: '/404',
  name: '404',
  component: () =>
    import ('@/views/404'),
  meta: {
    title: '404'
  }
}, {
  path: '/tableSpan',
  name: 'tableSpan',
  component: () =>
    import ('@/views/tableSpan'),
  meta: {
    title: 'tableSpan'
  }
}, {
  path: '/vuex',
  name: 'vuex',
  component: () =>
    import ('@/views/vuex'),
  meta: {
    title: 'vuex'
  }
}, {
  path: '/home',
  name: 'home',
  component: () =>
    import ('@/views/home'),
  meta: {
    title: 'home'
  }
}, {
  path: '/course',
  name: 'course',
  // 设置拦截    next是通行
  beforeEnter: (to, from, next) => {
    console.log('to:', to)
    console.log('from:', from)
    // 如果是登录状态 通行，如果不是则跳转
    // to： 去哪
    // from： 当前
    // next： 通行
    if (store.state.loginStatus) { // 判断条件是用户的登录状态
      next()
    } else {
      next('/vuex')
    }
  },
  beforeLeave: (to, from, next) => {
    console.log('to:', to)
    console.log('from:', from)
  },
  component: () =>
    import ('@/views/course'),
  meta: {
    title: 'course'
  }
}, {
  path: '/login',
  name: 'login',
  component: () =>
    import ('@/pages/login'),
  meta: {
    title: 'login'
  }
}, {
  path: '/remote',
  name: 'remote',
  component: () =>
    import ('@/views/remote'),
  meta: {
    title: 'remote'
  }
}, {
  path: '/tree',
  name: 'tree',
  component: () =>
    import ('@/views/treeData'),
  meta: {
    title: 'tree'
  }
}, {
  path: '/tree2',
  name: 'tree2',
  component: () =>
    import ('@/views/tree2'),
  meta: {
    title: 'tree2'
  }
}, {
  path: '/watch',
  name: 'watch',
  component: () =>
    import ('@/views/watcher'),
  meta: {
    title: 'watch'
  }
}, {
  path: '/table',
  name: 'table',
  component: () =>
    import ('@/views/table'),
  meta: {
    title: 'table'
  }
}, {
  path: '/nextTicks',
  name: 'nextTicks',
  component: () =>
    import ('@/views/nextTicks'),
  meta: {
    title: 'nextTicks'
  }
}, {
  path: '/refs',
  name: 'refs',
  component: () =>
    import ('@/views/refs'),
  meta: {
    title: 'refs'
  }
}, {
  path: '/test',
  name: 'test',
  component: () =>
    import ('@/views/test'),
  meta: {
    title: 'test'
  }
},
  {
    path: '/form',
    name: 'form',
    component: () =>
      import ('@/views/表单（校验、正则）'),
    meta: {
      title: 'myTest'
    }
  }, {
    path: '/computed',
    name: 'computed',
    component: () =>
      import ('@/views/computed'),
    meta: {
      title: 'computed'
    }
  }, {
    path: '/options',
    name: 'options',
    component: () =>
      import ('@/views/下拉框'),
    meta: {
      title: 'options'
    }
  }, {
    path: '/options2',
    name: 'options2',
    component: () =>
      import ('@/views/下拉框2'),
    meta: {
      title: 'options2'
    }
  }, {
    path: '/case',
    name: 'case',
    component: () =>
      import ('@/views/首字母大写'),
    meta: {
      title: 'case'
    }
  }, {
    path: '/music',
    name: 'music',
    component: () =>
      import ('@/views/music/music'),
    meta: {
      title: 'music'
    },
    alias: '/m' // 起别名
  }, {
    path: '/user_pages',
    name: 'user_page',
    component: () =>
      import ('@/views/user-pages'),
    meta: {
      title: 'user_pages'
    }
  }, {
    path: '/watchOptions',
    name: 'watchOptions',
    component: () =>
      import ('@/views/监听'),
    meta: {
      title: 'watchOptions'
    }
  },
  {
    path: '/user/:id',
    name: 'user',
    component: () =>
      import ('@/views/user'),
    meta: {
      title: 'user'
    },
    // props:true   路由组件传值
    props: (route) => ({
      id: route.params.id,
      title: route.query.title
    })
  }, {
    path: '/sass',
    name: 'sass',
    component: () =>
      import ('@/views/sass'),
    meta: {
      title: 'sass'
    }
  },
  {
    path: '/user-*',   // * 是通配符
    name: 'user-admin',
    component: () => import('@/views/user-admin'),
    meta: {
      title: 'user-admin'
    }
  }, {
    path: '/addProperty',
    name: 'addProperty',
    component: () =>
      import ('@/views/addProperty'),
    meta: {
      title: 'addProperty'
    }
  }, {
    path: '/mock',
    name: 'mock',
    component: () =>
      import ('@/views/mock模拟数据'),
    meta: {
      title: 'mock模拟数据'
    }
  }, {
    path: '/A',
    name: 'A',
    component: () =>
      import ('@/views/平行组件/A'),
    meta: {
      title: 'A'
    }
  }, {
    path: '/C',
    name: 'C',
    component: () =>
      import ('@/views/平行组件/C'),
    meta: {
      title: 'C'
    }
  }, {
    path: '/globalComponent',
    name: '全局组件',
    component: () =>
      import ('@/views/全局组件'),
    meta: {
      title: 'C'
    }
  },
  {
    path: '/add',
    name: 'add',
    component: () =>
      import ('@/exercise/vuex/Addition'),
    meta: {
      title: 'add'
    }
  },
  {
    path: '/sub',
    name: 'sub',
    component: () =>
      import ('@/exercise/vuex/Subtraction'),
    meta: {
      title: 'sub'
    }
  },
  {
    path: '/vuexCount',
    name: 'vuexCount',
    component: () =>
      import ('@/exercise/vuex/index'),
    meta: {
      title: 'vuexCount'
    }
  },
  {
    path: '/cookies',
    name: 'cookies',
    component: () =>
      import ('@/views/cookies'),
    meta: {
      title: 'cookies'
    }
  },
  {
    path: '/downLoadFile',
    name: 'downLoadFile',
    component: () =>
      import ('@/views/上传下载'),
    meta: {
      title: 'downLoadFile'
    }
  },
  {
    path: '/signCanvas',
    name: 'signCanvas',
    component: () =>
      import ('@/views/手写签名'),
    meta: {
      title: 'signCanvas'
    }
  },
  {
    path: '/directives',
    name: 'directives',
    component: () =>
      import ('@/views/自定义指令'),
    meta: {
      title: 'directives'
    }
  },
  {
    path: '/echarts',
    name: 'echarts',
    component: () =>
      import ('@/views/echarts图表'),
    meta: {
      title: 'echarts'
    }
  },
  {
    path: '/amap',
    name: 'amap',
    component: () =>
      import ('@/views/高德地图'),
    meta: {
      title: 'amap'
    }
  },
  {
    path: '/richText-1',
    name: 'richText-1',
    component: () =>
      import ('@/views/富文本编辑器/富文本-editor'),
    meta: {
      title: 'richText-1'
    }
  },
  {
    path: '/richText-2',
    name: 'richText-2',
    component: () =>
      import ('@/views/富文本编辑器/富文本-wangeditor'),
    meta: {
      title: 'richText-2'
    }
  },
  {
    path: '/richText-3',
    name: 'richText-3',
    component: () =>
      import ('@/views/富文本编辑器/富文本-quill'),
    meta: {
      title: 'richText-3'
    }
  },
  {
    path: '/select',
    name: 'select',
    component: () =>
      import ('@/views/下拉多选'),
    meta: {
      title: 'select'
    }
  },
  {
    path: '/treeSelect',
    name: 'treeSelect',
    component: () =>
      import ('@/views2/treeSelect'),
    meta: {
      title: 'treeSelect'
    }
  },
  {
    path: '/binding',
    name: 'binding',
    component: () =>
      import ('@/views2/双向绑定'),
    meta: {
      title: 'binding'
    }
  },
  {
    path: '/binding',
    name: 'binding',
    component: () =>
      import ('@/views2/双向绑定'),
    meta: {
      title: 'binding'
    }
  },
  {
    path: '/myTreeTransfer',
    name: 'myTreeTransfer',
    component: () =>
      import ('@/views2/myTreeTransfer'),
    meta: {
      title: 'myTreeTransfer'
    }
  },
  {
    path: '/b',
    name: 'b',
    component: () =>
      import ('@/views/平行组件/B'),
    meta: {
      title: 'b'
    }
  },
  {
    path: 'test2',
    name: 'test2',
    component: () =>
      import ('@/views2/test'),
    meta: {
      title: 'test2'
    }
  },
  {
    path: 'filters',
    name: 'filters',
    component: () =>
      import ('@/views2/filters'),
    meta: {
      title: 'filters'
    }
  },
  {
    path: 'keepAlive',
    name: 'keepAlive',
    component: () =>
      import ('@/views2/keepAlive/index'),
    meta: {
      title: 'keepAlive'
    }
  },
  {
    path: 'myDirective',
    name: 'myDirective',
    component: () =>
      import ('@/views2/自定义指令'),
    meta: {
      title: 'myDirective'
    }
  },
  {
    path: 'three',
    name: 'three',
    component: () =>
      import ('@/views2/three'),
    meta: {
      title: 'three'
    }
  },
  {
    path: 'myCallBack',
    name: 'myCallBack',
    component: () =>
      import ('@/views2/回调/myCallBack'),
    meta: {
      title: 'callBack'
    }
  },
  {
    path: 'map2',
    name: 'map2',
    component: () =>
      import ('@/views/高德地图2'),
    meta: {
      title: 'map2'
    }
  },
  {
    path: 'map3',
    name: 'map3',
    component: () =>
      import ('@/views/高德地图3'),
    meta: {
      title: 'map3'
    }
  },
  {
    path: 'chart',
    name: 'chart',
    component: () =>
      import ('@/views2/chart'),
    meta: {
      title: 'chart'
    }
  },

  {
    path: 'chart2',
    name: 'chart2',
    component: () =>
      import ('@/views2/chart2'),
    meta: {
      title: 'chart2'
    }
  },
  {
    path: 'chart3',
    name: 'chart3',
    component: () =>
      import ('@/views2/chart3'),
    meta: {
      title: 'chart3'
    }
  },
  {
    path: 'chart4',
    name: 'chart4',
    component: () =>
      import ('@/views2/chart4'),
    meta: {
      title: 'chart4'
    }
  },
  {
    path: 'map-position',
    name: 'map-position',
    component: () =>
      import ('@/views/高德地图4'),
    meta: {
      title: 'map-position'
    }
  }, {
    path: 'myProgress',
    name: 'myProgress',
    component: () =>
      import ('@/views2/进度条'),
    meta: {
      title: 'myProgress'
    }
  },
  {
    path: 'amapSvg',
    name: 'amapSvg',
    component: () =>
      import ('@/views/高德地图svg.vue'),
    meta: {
      title: 'amapSvg'
    }
  },
  {  // 404一定要放在最后，它是从上往下 有匹配优先顺序的
    path: '/*',  // 如果上面都没有 就跳转到404页面
    name: '404',
    component: () =>
      import ('@/views/404'),
    meta: {
      title: '404'
    },
    hidden: true
  },
  ...otherRoute
]

let router = new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: defaultRouter
})

// 导航守卫
// to: 去哪里
// from: 从哪里来
// next: 放行
router.beforeEach(function(to, from, next) {
  console.log('to:', to)
  console.log('from:', from)

  console.log('打印token:', store.state.token)

  if (to.path === '/login') {
    next()
  } else {
    const token = store.state.token
    console.log('token:', token)
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

// router.afterEach((to, from) => {
//   alert('欢迎进入')
// })

export default router
